Angular এর Reactive এবং Template-driven Forms গাইড ও নোট

AngularJS (এখন Angular 2+ এর পর থেকে Angular হিসেবে পরিচিত) ফ্রন্টএন্ড ডেভেলপমেন্টের জন্য একটি শক্তিশালী ফ্রেমওয়ার্ক। এতে রয়েছে দুটি ধরনের ফর্মের ব্যবস্থাপনা পদ্ধতি: Reactive Forms এবং Template-driven Forms। এই দুটি পদ্ধতিই ব্যবহারকারীর ইনপুট গ্রহণ করার জন্য ব্যবহৃত হয়, তবে তাদের গঠন এবং ব্যবহারের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে।

MeanJS স্ট্যাকের মধ্যে, Angular ব্যবহার করে আপনি উভয় ধরনের ফর্ম তৈরি করতে পারেন, তবে তাদের কনফিগারেশন এবং ম্যানেজমেন্টের ধরন আলাদা। চলুন, Reactive Forms এবং Template-driven Forms এর মধ্যে পার্থক্য এবং তাদের ব্যবহারের উপায় নিয়ে বিস্তারিত আলোচনা করি।

১. Reactive Forms

Reactive Forms (বা Model-driven Forms) একটি অ্যাপ্লিকেশন-ভিত্তিক পদ্ধতি যেখানে ফর্মের স্টেট (যেমন ইনপুটের মান, ভ্যালিডেশন ইত্যাদি) পুরোপুরি কম্পোনেন্ট ক্লাসে ম্যানেজ করা হয়। এখানে, ফর্মের ইনপুট ক্ষেত্রগুলি FormControl এবং FormGroup এর মাধ্যমে নির্ধারিত হয়।

Reactive Forms এর সুবিধা:

• ফর্মের স্টেট এবং ভ্যালিডেশন ক্লাসের মধ্যে ম্যানেজ করা হয়, তাই এটি স্কেলেবল এবং টেস্টযোগ্য।
• ফর্মের স্টেট বা ডেটা ফ্লো পুরোপুরি কন্ট্রোল করা যায়।
• সিনক্রোনাস এবং অ্যাসিনক্রোনাস ভ্যালিডেশন সমর্থন করে।

Reactive Forms ব্যবহার করতে যে পদক্ষেপগুলো অনুসরণ করতে হবে:

1. Angular Module-এ ReactiveFormsModule যোগ করা:

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. FormControl এবং FormGroup তৈরি করা:

// user-form.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor() {
    this.userForm = new FormGroup({
      username: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email]),
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

3. Template এ ফর্ম তৈরি করা:

<!-- user-form.component.html -->
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label for="username">Username</label>
  <input id="username" formControlName="username" type="text">
  <div *ngIf="userForm.get('username').invalid && userForm.get('username').touched">
    Username is required.
  </div>

  <label for="email">Email</label>
  <input id="email" formControlName="email" type="email">
  <div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">
    Valid email is required.
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

ব্যাখ্যা:

• FormGroup একটি গ্রুপ তৈরি করে যা একাধিক FormControl ধারণ করে।
• formControlName ব্যবহার করে ফর্মের ইনপুট ফিল্ডগুলো কনট্রোল করা হয়।
• Validators ব্যবহার করে ফর্মের ইনপুটে ভ্যালিডেশন যুক্ত করা হয়।

২. Template-driven Forms

Template-driven Forms Angular এর ঐতিহ্যবাহী পদ্ধতি, যেখানে ফর্মের স্টেট এবং ভ্যালিডেশন মূলত HTML টেমপ্লেটের মধ্যেই পরিচালিত হয়। এখানে, ফর্মের সাথে সম্পর্কিত তথ্য শুধুমাত্র HTML টেমপ্লেটে থাকা ngModel ডিরেকটিভের মাধ্যমে ম্যানেজ করা হয়।

Template-driven Forms এর সুবিধা:

• এটি ছোট এবং সোজা ফর্মের জন্য উপযুক্ত, যেখানে কমপ্লেক্স কনফিগারেশন প্রয়োজন হয় না।
• কোড সহজ এবং টেমপ্লেটের মধ্যে একসঙ্গে কাজ করে, যেটি কিছু ডেভেলপারদের কাছে সহজ মনে হয়।
• সহজ পদ্ধতিতে মডেল-বাইন্ডিং এবং ভ্যালিডেশন সঞ্চালিত হয়।

Template-driven Forms ব্যবহার করতে যে পদক্ষেপগুলো অনুসরণ করতে হবে:

1. Angular Module-এ FormsModule যোগ করা:

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Template-driven ফর্ম তৈরি করা:

<!-- user-form.component.html -->
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <label for="username">Username</label>
  <input id="username" name="username" ngModel required>
  <div *ngIf="userForm.controls.username?.invalid && userForm.controls.username?.touched">
    Username is required.
  </div>

  <label for="email">Email</label>
  <input id="email" name="email" ngModel required email>
  <div *ngIf="userForm.controls.email?.invalid && userForm.controls.email?.touched">
    Valid email is required.
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

ব্যাখ্যা:

• ngModel ডিরেকটিভ ব্যবহার করে ফর্ম কন্ট্রোল তৈরি করা হয় এবং এটি ফর্মের মান (value) এবং স্টেট (valid/invalid) সিঙ্ক্রোনাইজ করে।
• ngForm একটি ফর্ম ডিরেকটিভ যা পুরো ফর্মের ভ্যালিডেশন এবং কন্ট্রোল সঞ্চালন করে।

Reactive Forms এবং Template-driven Forms এর মধ্যে পার্থক্য

সারাংশ

Reactive Forms এবং Template-driven Forms উভয়ই Angular এর মধ্যে ফর্ম ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, তবে তাদের কনফিগারেশন এবং ব্যবহারের মধ্যে পার্থক্য রয়েছে। Reactive Forms আরো শক্তিশালী এবং স্কেলেবল, যেখানে ডেভেলপাররা ফর্মের স্টেট, ভ্যালিডেশন এবং ডেটা এক্সচেঞ্জ সম্পূর্ণভাবে কম্পোনেন্ট ক্লাসের মাধ্যমে নিয়ন্ত্রণ করতে পারেন। অন্যদিকে, Template-driven Forms ছোট ফর্মের জন্য উপযুক্ত এবং এটি সোজা পদ্ধতিতে টেমপ্লেটের মধ্যে ইনপুট পরিচালনা করে। MeanJS অ্যাপ্লিকেশনের মধ্যে Angular ব্যবহার করে আপনার প্রয়োজন অনুযায়ী যেকোনো পদ্ধতি বেছে নিয়ে ফর্ম ম্যানেজমেন্ট করতে পারেন।